import 'dart:async';

import 'package:card_swiper/card_swiper.dart';
import 'package:eplorex/pages/activity/user_activity_agreement_page.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';

import '../../dao/activity_details_dao.dart';
import '../../models/activity/activity_session.dart';

class ActivityDetailsPage extends StatefulWidget {
  @override
  State<ActivityDetailsPage> createState() => _ActivityDetailsPageState();
}

class _ActivityDetailsPageState extends State<ActivityDetailsPage> {
  late Future<List<ActivitySession>> _activitySessions;
  var _agreement = false;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _activitySessions = ActivityDetailsDao.fetchActivitySession(111);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBodyBehindAppBar: true,
      appBar: AppBar(
        backgroundColor: Colors.transparent,
        elevation: 0,
      ),
      body: Column(
        children: [
          _getSwiper(),
          Expanded(
              child: Container(
            margin: EdgeInsets.symmetric(horizontal: 5),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Container(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.start,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      const Padding(
                        padding: EdgeInsets.all(5),
                        child: Text(
                          "独立骑行200KM的乐趣",
                          style: TextStyle(
                              fontWeight: FontWeight.bold, fontSize: 16),
                        ),
                      ),
                    ],
                  ),
                ),
                Wrap(
                  spacing: 10,
                  children: [
                    Icon(
                      Icons.access_time,
                      size: 20,
                    ),
                    Text("2023-05-01 ~ 2023-05-07")
                  ],
                ),
                Wrap(
                  spacing: 10,
                  children: [
                    Icon(Icons.location_on_outlined),
                    Text("上海市普陀区桃浦路1023弄")
                  ],
                ),
                Text(
                  "活动场次",
                  style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
                ),
                FutureBuilder(
                    future: _activitySessions,
                    builder: (BuildContext context,
                        AsyncSnapshot<List<ActivitySession>> snapshot) {
                      if (snapshot.connectionState == ConnectionState.waiting) {
                        return Text("loading");
                      }
                      return _buildActivityItem(snapshot.data);
                    }),
                Container(
                  margin: EdgeInsets.only(top: 20),
                  child: Row(
                    children: [
                      Text(
                        "活动介绍",
                        style: TextStyle(
                            fontSize: 18, fontWeight: FontWeight.bold),
                      ),
                    ],
                  ),
                )
              ],
            ),
          ))
        ],
      ),
      bottomNavigationBar: _buildBottomNavigationBar(),
    );
  }

  Widget _buildActivityItem(List<ActivitySession>? data) {
    return Container(
      height: 100,
      child: ListView(
        scrollDirection: Axis.horizontal,
        children: data == null
            ? []
            : data
                .map((e) => Container(
                      padding: EdgeInsets.all(10),
                      margin: EdgeInsets.all(5),
                      decoration: BoxDecoration(
                        border: Border.all(color: Colors.red, width: 1),
                      ),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Row(
                            children: [
                              Container(
                                child: Column(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: [
                                    Text(
                                      '${e.startTime}',
                                      style: TextStyle(
                                          fontWeight: FontWeight.bold,
                                          fontSize: 16),
                                    ),
                                    Text('${e.startWeekend}')
                                  ],
                                ),
                              ),
                              Container(
                                child: Text(' ~  '),
                              ),
                              Container(
                                child: Column(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: [
                                    Text('${e.endTime}',
                                        style: TextStyle(
                                            fontWeight: FontWeight.bold,
                                            fontSize: 16)),
                                    Text('${e.endWeekend}')
                                  ],
                                ),
                              ),
                            ],
                          ),
                          Wrap(
                            children: [
                              const Icon(
                                Icons.person,
                                size: 15,
                              ),
                              Text('${e.participateNo}/${e.activityCapacity}')
                            ],
                          )
                        ],
                      ),
                    ))
                .toList(),
      ),
    );
  }

  Widget? _buildBottomNavigationBar() {
    return Container(
        height: 120,
        color: Colors.white,
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Row(
              children: [
                Radio(
                    value: false,
                    groupValue: _agreement,
                    onChanged: (value) {
                      setState(() {
                        _agreement = value as bool;
                      });
                    }),
                Text.rich(TextSpan(text: '我已阅读并接受', children: [
                  TextSpan(
                      text: '《活动报名用户协议及承诺书》',
                      style: TextStyle(color: Colors.blue),
                      recognizer: TapGestureRecognizer()
                        ..onTap = () {
                          Navigator.of(context).push(MaterialPageRoute<void>(
                            builder: (_) => ActivityAgreementPage(),
                          ));
                        })
                ]))
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                TextButton(
                  child: Column(
                    children: [
                      Icon(
                        Icons.messenger_outline,
                        size: 25,
                        color: Colors.black,
                      ),
                      Text(
                        "咨询",
                        style: TextStyle(fontSize: 12, color: Colors.black),
                      )
                    ],
                  ),
                  onPressed: () {},
                ),
                Expanded(
                    child: TextButton(
                  child: Text("立即报名"),
                  onPressed: () {},
                  style: ButtonStyle(
                    backgroundColor: MaterialStateProperty.all(Colors.blue),
                    foregroundColor: MaterialStateProperty.all(Colors.white),
                  ),
                )),
                SizedBox(
                  width: 20,
                )
              ],
            )
          ],
        ));
  }

  Widget _getSwiper() {
    var height = MediaQuery.of(context).size.width / 400.0 * 300.0;
    return Container(
      height: height,
      child: Swiper(
        itemBuilder: (BuildContext context, int index) {
          return Image.network(
            "https://picsum.photos/400/300",
            fit: BoxFit.fill,
          );
        },
        autoplay: true,
        itemCount: 3,
        pagination: SwiperPagination(),
        // control: SwiperControl(),
      ),
    );
  }
}
